<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>数据概览 - 智驭安行系统</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="./css/data-overview.css">
		<link rel="icon" href="./img/logo_nobackground.png" type="image/png">
	</head>
	<body>
		<div id="app">
			<!-- 页面头部 -->
			<header class="page-header">
				<div class="header-left">
					<h1>数据概览</h1>
					<el-breadcrumb separator="/">
						<el-breadcrumb-item>首页</el-breadcrumb-item>
						<el-breadcrumb-item>数据统计</el-breadcrumb-item>
						<el-breadcrumb-item>数据概览</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="header-right">
					<el-button-group>
						<el-button type="primary" @click="refreshData">
							<i class="el-icon-refresh"></i> 刷新数据
						</el-button>
						<el-button type="success" @click="exportData">
							<i class="el-icon-download"></i> 导出数据
						</el-button>
					</el-button-group>
				</div>
			</header>

			<!-- 主要内容区 -->
			<div class="main-content">
				<!-- 时间范围选择 -->
				<div class="time-range-section">
					<el-radio-group v-model="timeRange" @change="handleTimeRangeChange">
						<el-radio-button label="today">今日</el-radio-button>
						<el-radio-button label="week">本周</el-radio-button>
						<el-radio-button label="month">本月</el-radio-button>
						<el-radio-button label="custom">自定义</el-radio-button>
					</el-radio-group>
					<el-date-picker
						v-if="timeRange === 'custom'"
						v-model="customDateRange"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						@change="handleCustomDateChange">
					</el-date-picker>
				</div>

				<!-- 数据概览卡片 -->
				<div class="overview-cards">
					<div class="overview-card" v-for="card in overviewCards" :key="card.id">
						<div class="card-icon" :style="{ backgroundColor: card.color }">
							<i :class="card.icon"></i>
						</div>
						<div class="card-content">
							<div class="card-title">{{ card.title }}</div>
							<div class="card-value">{{ card.value }}</div>
							<div class="card-trend" :class="card.trend">
								<i :class="card.trend === 'up' ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
								{{ card.change }}
							</div>
						</div>
					</div>
				</div>

				<!-- 图表区域 -->
				<div class="charts-section">
					<!-- 交通流量趋势 -->
					<div class="chart-card">
						<div class="chart-header">
							<h3>交通流量趋势</h3>
							<el-dropdown @command="handleTrafficChartAction">
								<el-button size="mini">
									操作<i class="el-icon-arrow-down el-icon--right"></i>
								</el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="export">导出数据</el-dropdown-item>
									<el-dropdown-item command="refresh">刷新图表</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
						<div class="chart-content" id="trafficChart">
							<div class="chart-placeholder">
								<i class="el-icon-data-line"></i>
								<p>交通流量趋势图表</p>
							</div>
						</div>
					</div>

					<!-- 安全事件分布 -->
					<div class="chart-card">
						<div class="chart-header">
							<h3>安全事件分布</h3>
							<el-dropdown @command="handleSafetyChartAction">
								<el-button size="mini">
									操作<i class="el-icon-arrow-down el-icon--right"></i>
								</el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="export">导出数据</el-dropdown-item>
									<el-dropdown-item command="refresh">刷新图表</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
						<div class="chart-content" id="safetyChart">
							<div class="chart-placeholder">
								<i class="el-icon-pie-chart"></i>
								<p>安全事件分布图表</p>
							</div>
						</div>
					</div>
				</div>

				<!-- 数据明细表格 -->
				<div class="data-table-section">
					<div class="section-header">
						<h3>数据明细</h3>
						<el-button type="text" @click="exportTableData">
							<i class="el-icon-download"></i> 导出表格
						</el-button>
					</div>
					<el-table :data="tableData" style="width: 100%" v-loading="tableLoading">
						<el-table-column prop="date" label="日期" width="180"></el-table-column>
						<el-table-column prop="trafficVolume" label="交通流量" width="120"></el-table-column>
						<el-table-column prop="safetyEvents" label="安全事件" width="120"></el-table-column>
						<el-table-column prop="averageSpeed" label="平均速度" width="120"></el-table-column>
						<el-table-column prop="congestionLevel" label="拥堵程度" width="120">
							<template slot-scope="scope">
								<el-tag :type="getCongestionType(scope.row.congestionLevel)">
									{{ scope.row.congestionLevel }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="remarks" label="备注"></el-table-column>
					</el-table>
					<div class="pagination-container">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="currentPage"
							:page-sizes="[10, 20, 50, 100]"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="total">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						// 时间范围
						timeRange: 'today',
						customDateRange: [],

						// 数据概览卡片
						overviewCards: [
							{
								id: 1,
								title: '总交通流量',
								value: '1,234,567',
								icon: 'el-icon-data-line',
								color: '#667eea',
								trend: 'up',
								change: '+12.5%'
							},
							{
								id: 2,
								title: '安全事件数',
								value: '23',
								icon: 'el-icon-warning',
								color: '#f56c6c',
								trend: 'down',
								change: '-8.3%'
							},
							{
								id: 3,
								title: '平均车速',
								value: '45 km/h',
								icon: 'el-icon-speedometer',
								color: '#67c23a',
								trend: 'up',
								change: '+5.2%'
							},
							{
								id: 4,
								title: '拥堵指数',
								value: '2.3',
								icon: 'el-icon-data-analysis',
								color: '#e6a23c',
								trend: 'down',
								change: '-3.1%'
							}
						],

						// 表格数据
						tableData: [
							{
								date: '2024-03-20',
								trafficVolume: '123,456',
								safetyEvents: '5',
								averageSpeed: '45 km/h',
								congestionLevel: '轻度拥堵',
								remarks: '早高峰期间交通流量较大'
							},
							{
								date: '2024-03-19',
								trafficVolume: '118,234',
								safetyEvents: '3',
								averageSpeed: '48 km/h',
								congestionLevel: '畅通',
								remarks: '交通状况良好'
							}
						],

						// 分页
						currentPage: 1,
						pageSize: 10,
						total: 0,

						// 加载状态
						tableLoading: false
					}
				},
				methods: {
					// 刷新数据
					refreshData() {
						this.$message.success('数据刷新中...');
						// TODO: 实现数据刷新逻辑
					},

					// 导出数据
					exportData() {
						this.$message.success('数据导出中...');
						// TODO: 实现数据导出逻辑
					},

					// 处理时间范围变化
					handleTimeRangeChange(value) {
						// TODO: 根据时间范围更新数据
						this.refreshData();
					},

					// 处理自定义日期变化
					handleCustomDateChange(value) {
						// TODO: 根据自定义日期范围更新数据
						this.refreshData();
					},

					// 处理交通流量图表操作
					handleTrafficChartAction(command) {
						if (command === 'export') {
							this.$message.success('导出交通流量数据...');
						} else if (command === 'refresh') {
							this.$message.info('刷新交通流量图表...');
						}
					},

					// 处理安全事件图表操作
					handleSafetyChartAction(command) {
						if (command === 'export') {
							this.$message.success('导出安全事件数据...');
						} else if (command === 'refresh') {
							this.$message.info('刷新安全事件图表...');
						}
					},

					// 导出表格数据
					exportTableData() {
						this.$message.success('导出表格数据...');
						// TODO: 实现表格数据导出逻辑
					},

					// 获取拥堵程度标签类型
					getCongestionType(level) {
						const typeMap = {
							'畅通': 'success',
							'轻度拥堵': 'warning',
							'中度拥堵': 'danger',
							'严重拥堵': 'danger'
						};
						return typeMap[level] || 'info';
					},

					// 处理分页大小变化
					handleSizeChange(val) {
						this.pageSize = val;
						this.refreshData();
					},

					// 处理页码变化
					handleCurrentChange(val) {
						this.currentPage = val;
						this.refreshData();
					}
				},
				mounted() {
					// 初始化数据
					this.total = this.tableData.length;
				}
			});
		</script>
	</body>
</html>